<template>
  <div>
   <container :title="title" class="container">
      <div class="body">
          <div v-for="({title,desc,date},index) in listD" :key="index" class="item">
            <img class="warning" src="../../../img/warning.png" />
            <div class="desc">
                <div class="titleLabel">{{title}}</div>
                <div class="descLabel">{{desc}}</div>
                <div class="date">{{date}}</div>
            </div>
            <!-- <progress-bar :progress="'50'" class="warning" /> -->
            <dv-loading class="warning"></dv-loading>
          </div>
      </div>
    </container>
  </div>
</template>

<script>
import progressBar from '@/components/datav/component/progress'
import injectRootInstance from '@/components/datav/mixins/injectRootInstance'
export default {
  mixins: [injectRootInstance],
  components: { progressBar },
  computed: {
    title () {
      return this.rootThis.monitorData.title
    },
    listD() {
      return this.rootThis.monitorData.data
    }
  }
}
</script>

<style scoped>
.container{
  height:311px;
}
.body{
  margin: 5px;
  padding: 5px;
}
.warning{
  width:51px;
  height:51px;
}
.item{
  display: flex;
  align-content: center;
  align-items: center;
}
.desc{
  flex: 1;
  padding-left:8px;
  margin:4px;
}
.titleLabel{
  font-size: 12px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #01E8F3;
}
.descLabel{
  font-size: 14px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #F94141;
}
.date{
  font-size: 12px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #808080;
}
</style>
